<!--  -->
<template>
  <div class="login">
    <!-- <HeaderTop title="注册"></HeaderTop> -->
    <form class="login-wrapper" @submit.prevent="signup">
      <section class="login_message">
        <input type="tel" maxlength="11" placeholder="输入手机号" class="tel" v-model="phone">
        <button class="get_verification" :class="{btn:isGray==true}" @click.prevent="getCode">
          {{computeTime > 0 ? `已发送(${computeTime}s)` : '获取验证码'}}
        </button>
      </section>
      <section class="login_verification">
        <input type="tel" maxlength="8" placeholder="填写验证码" class="veri" v-model="code">
      </section>
      <section class="invitationCode">
        <input type="text" placeholder="邀请码(非必填)" class="veri" v-model="invitationCode">
      </section>
      <section class="login_password">
        <input type="password" class="pw" minlength="6" maxlength="15" placeholder="请输入6-15位密码" v-model="password1">
      </section>
      <section class="login_hint">
        <input type="password" class="pw" minlength="6" maxlength="15" placeholder="请确认密码" v-model="password2" @blur="checkpwd()">
      </section>
      <button class="login_submit">确定</button>
    </form>
  </div>
</template>
<script>
// import HeaderTop from '../../components/HeaderTop/HeaderTop'
// import { setInterval, clearInterval, clearTimeout } from 'timers';
export default {
  data () {
    return {
      computeTime:0, //倒计时时间
      phone:'',
      code:'',//短信验证码
      invitationCode:'', //邀请码
      password1:'', //输入密码
      password2:'',//确认密码
      isGray:false,
    };
  },

  // components: {
  //   HeaderTop
  // },

  computed: {
  },

  methods: {
    // 异步发送验证码
    async getCode(){
      if(!this.phone){
        this.$toast('请输入手机号');
        // this.$dialog.alert({
        //   message: '请输入手机号'
        // })
      }else{
        if(!this.computeTime){ //倒计时不是0 才能倒计时
        this.computeTime = 120
        this.isGray = true
        this.IntervalId = setInterval(()=>{
          this.computeTime --
          if(this.computeTime <= 0){
            clearInterval(this.IntervalId)
            this.isGray = false
          }
        },1000)
        // 发送ajax请求（向手机发送验证码短信）
        const result = await this.API.reqSendCode(this.phone)
        console.log(result)
        if(result.retCode !== '000'){
          this.$toast(result.retMsg);
          // this.$dialog.alert({
          //   message: result.retMsg
          // })
          // 停止倒计时
          if(this.computeTime){
            this.computeTime = 0
            clearInterval(this.IntervalId)
            this.IntervalId = undefined
          }
        }
      }
      }
    },
    checkpwd(){
      if(this.password1 !== this.password2){
        this.$toast('两次密码输入不一致 请重新输入');
        // this.$dialog.alert({
        //   message: '两次密码输入不一致 请重新输入'
        // })
        this.password2 = ''
        return 
      }
    },

    // 异步登录
    async signup(){
      const {phone,code,password1,password2,invitationCode} = this
      console.log(invitationCode)
      if(!phone){
        // 输入手机号
        this.$toast('请输入手机号');
        // this.$dialog.alert({
        //   message: '输入手机号'
        // })
        return 
      }
      if(!code){
        // 输入验证码
        this.$toast('请输入验证码');
        // this.$dialog.alert({
        //   message: '输入验证码'
        // })
        return 
      }
      if(!password1 || !password2){
        // 输入密码
        this.$toast('请输入密码');
        // this.$dialog.alert({
        //   message: '输入密码'
        // })
        return
      }
      let result = await this.API.reqSignUp({phone,password:password2,sms:code,invitationCode:invitationCode})
      console.log(result)
      if(result.retCode === '000'){
        // this.$dialog.alert({
        //   message: '注册成功'
        // }).then(()=>{
        //   this.$router.replace('/login')
        // })
        this.$toast('注册成功 请重新登录');
        this.$router.replace('/login')
      }
      // 手机已经注册过  验证码错误
      if(result.retCode !== '000'){
        this.$toast(result.retMsg);
        // this.$dialog.alert({
        //   message: result.retMsg
        // })
        return
      }
    }
  }
}

</script>
<style lang='stylus' scoped>
@import "../../common/stylus/mixins.styl"
.login
  // margin-top 45px
  padding-bottom 0 !important
  overflow hidden
  width 100%
  height 100%
  background #fff
  .login-wrapper
    width 100%
    height 100%
    top-border-1px(#e4e4e4)
    display flex
    align-items center
    flex-direction column
    padding-top 25px
    button 
      padding 0
      margin 0
      border:1px solid transparent
      outline none
    section
      border 1px solid #e4e4e4
      width 305px
      border-radius 100px
      overflow hidden
      height 47px
      margin-bottom 16px
      display flex
      justify-content space-between
      input 
        background-repeat no-repeat
        background-size 26px 28px
        background-position 15px 10px
        height 47px
        padding-left 50px
        line-height 47px
        font-size 14px
        width 160px
        &.tel
          background-image url(./img/tell.png)
        &.veri
          background-image url(./img/num.png)
        &.pw
          background-image url(./img/mima.png)
      .get_verification
        width 100px
        background #145B3E
        color #fff
        height 47px
        line-height 47px
        font-size 12px
        &.btn
          background #656565
    .login_submit
      border 1px solid #e4e4e4
      width 305px
      border-radius 100px
      height 47px
      background #145B3E
      color #fff
</style>